<template>
	<view class="parent_view">
		<nav-bar>修改密码</nav-bar>

		<view class="info-item">
			<view class="info-title">原密码</view>
			<input class="info-input" maxlength="20" placeholder="请输入原密码" @input="onPwdInputChanged"></input>
		</view>

		<view class="info-cutoff" />

		<view class="info-item">
			<view class="info-title">新密码</view>
			<input class="info-input" maxlength="20" placeholder="请输入新密码" @input="onNewPwdInputChanged"></input>
		</view>

		<view class="info-cutoff" />

		<view class="info-item">
			<view class="info-title">重复新密码</view>
			<input class="info-input" maxlength="20" placeholder="请再次输入新密码" @input="onNewPwdInputAgainChanged"></input>
		</view>

		<view>{{tips}}</view>

		<button @click="nextStep" class="btn_next_step" :disabled="isBtnDisable">确定</button>
	</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import inputVerification from '@/common/verification.js';

	import {
		changeUserPassword
	} from '@/services/account.js';
	
	export default {
		data() {
			return {
				isBtnDisable: true,
				mobile: '',
				// inputType: "changepwd",

				pwdValue: "",
				newPwdValue: "",
				newPwdAgainValue: "",
				tips: " "
			}
		},
		
		computed: {
			...mapState(["userInfo", "activeMenu"]),
		},

		methods: {
			...mapMutations(['logout']),
			nextStep() {
				this.changePwd();
			},
			
			changePwd() {
				console.log(this.userInfo)
				uni.showLoading()
				changeUserPassword({
					id: this.userInfo.userEntity.userId,
					oldPassword: this.pwdValue + "123",
					newPassword: this.newPwdValue,
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						this.logout();
						uni.reLaunch({
							url: '/pages/home/home'
						})
					}
				});
			},

			onNewPwdInputAgainChanged(e) {
				this.newPwdAgainValue = e.detail.value;
				this.isInputOk();
			},

			onNewPwdInputChanged(e) {
				this.newPwdValue = e.detail.value;
				this.isInputOk();
			},

			onPwdInputChanged(e) {
				this.pwdValue = e.detail.value;
				this.isInputOk();
			},

			isInputOk() {
				let pwdOk, newPwdOk, newPwdAgainOk;
				pwdOk = inputVerification.verificationFuc({
					name: 'isNull',
					value: this.pwdValue
				}).flag;

				newPwdOk = inputVerification.verificationFuc({
					name: 'isPassWord',
					value: this.newPwdValue
				}).flag;
				
				newPwdAgainOk = (this.newPwdValue === this.newPwdAgainValue);

				this.isBtnDisable = true;
				if(!pwdOk) {
					this.tips = "请输入正确格式的原密码";
				} else if(!newPwdOk) {
					this.tips = "请输入字母和数字组合的新密码";
				} else if(!newPwdAgainOk) {
					this.tips = "两次输入的新密码不一致";
				} else {
					this.tips = " ";
					this.isBtnDisable = false
				}
			},

			jumpToOtherPage(type, reData, localData) {
				if (reData.token.length > 0) {
					this.reLaunchIndex(reData);
					return;
				}

				if (type === 'register') {
					uni.redirectTo({
						url: '/pbase/center/personinfo'
					})
					return;
				}
			},

			_genLoginData(data) {
				if (data.token.length > 0) {
					this.login(data);
					console.log('_genLoginData token=' + Http.token + 'name = ')
				}
			},

			reLaunchIndex(reData) {
				this._genLoginData(reData);
				uni.reLaunch({
					url: '/pages/index/index?inputType=register'
				})
			}
		}
	}
</script>

<style lang="scss">
	.parent_view {
		padding-left: 40upx;
		padding-right: 40upx;
	}

	.info-item {
		width: 100%;
		height: 100upx;
		align-items: center;
		display: flex;
		position: relative;

		.info-title {
			height: 22px;
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.65);
			line-height: 22px;
		}

		.info-input {
			height: 60upx;
			right: 60upx;
			text-align: left;
			position: absolute;
		}
	}

	.info-cutoff {
		width: 100%;
		height: 1px;
		background: rgba(0, 0, 0, 0.07);
		box-shadow: 0px 0px 0px 0px #FFFFFF;
	}

	.btn_next_step {
		margin-top: 80upx;
		margin-left: 0upx;
		margin-right: 0upx;
		background-color: #327FFC;
		color: #FFFFFF;
	}
</style>
